/**
 * 组件模板
 * 使用时修改 `IntegralRollList` 为对应的组件名
 */
import { View, Text, Image } from '@tarojs/components';

import './index.scss';

import { timeFormat } from '../../utils/utils';

import use from '../../static/user/use.png';
import timeOut from '../../static/user/time-out.png';
import classnames from 'classnames';

function UserRollItem({ list, type }) {
  return (
    <View className='roll-item-wrapper'>
      {list &&
        list.map(item => {
          return (
            <View className='item' key={type ? item.coupon_type_image_id : item.id}>
              <View className={classnames({ 'item-name': true, 'time-out': type ? true : false })}>
                {item.has_coupon_type_image.name}
              </View>
              <View className={classnames({ 'item-id': true, 'time-out': type ? true : false })}>
                {item.coupon_no}
              </View>
              <View className={classnames({ 'item-time': true, 'time-out': type ? true : false })}>
                {item.expired_time
                  ? `截止${timeFormat(item.expired_time, 'yyyy-MM-dd')}前使用`
                  : '时间无限制'}
              </View>
              {type ? (
                <Image src={item.use_status === 1 ? timeOut:use} className='no-use-img' />
              ) : (
                ''
              )}
            </View>
          );
        })}
    </View>
  );
}

export default UserRollItem;
